{% extends "Cart/base.html" %}

{% block title %}购物车界面{% endblock %}

{% block file %}
    <link rel="stylesheet" href="{{ url_for('static',filename='css/module.css') }}">
    <link rel="stylesheet" href="{{ url_for('static',filename='css/index.css') }}">
    <link rel="stylesheet" href="{{ url_for('static',filename='css/Cart/1.css') }}">
    <script type="text/javascript" src="{{ url_for('static',filename='js/jquery-3.6.0.min.js') }}"></script>
{% endblock %}

{% block body %}
<!--返回首页-->
<div id="tui">
    <span id="sp11"><a style="text-decoration: none;color: black" href="{{ url_for("index.index") }}">首页</a></span>&nbsp;/
    <span id="sp22"><a style="text-decoration: none;color: black" id="hello2" href="{{ url_for("product.cart") }}">购物车</a></span>
</div>
<!--购物车界面-->
<div id="text1" style="margin: 10px auto 60px">
    <div id="tex1-1"><div id="tex1-1-1"><img src="{{ url_for('static',filename='image/购物车.png') }}" style="width: 20px;height: 20px;vertical-align: bottom;margin-right: 5px">购物车</div></div>
    <div id="tex1-2">
        <div id="tex121">
                <table>
                    <thead>
                    <tr>
                        <th width="8%"><input class="check-all" id="checkall" type="checkbox">全选</th>
                        <th style="width: 90px;"></th>
                        <th width="28%">书籍</th>
                        <th width="11%">单价</th>
                        <th width="15%">数量</th>
                        <th width="10%">金额</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody id="car-list"></tbody>
                </table>
                <div id="hello">
                    <div id="hello1">
                        <button id="deletes">删除所选商品</button>
                        <div id="hello3">
                            已选商品<span id="selectedTotal">0</span>件&nbsp;总价￥<span id="priceTotal">0</span>
                        </div>
                    </div>
                </div>
            <button id="jiesuan">结算</button>
        </div>
    </div>
</div>
    <div style="width: 100%;height: 60px;background-color: rgb(179,190,245)"></div>
<!--弹窗删除-->
<div class="delcon">
    <div class="desure">确认删除?</div>
    <div class="delfoot">
        <div class="delcer">确认</div>
        <div class="delcan">取消</div>
    </div>
</div>
<!--头部管理-->
<script type="text/javascript">
    $("#guanli_a").click(function () {
        $("#liebiao").toggle();
    });
</script>
<!--显示购物车数据-->
<script type="text/javascript">
    $(document).ready(function () {
        showCartList();
    });
    function showCartList() {
        $("#car-list").empty();
        /**
         * ajax请求   地址 /product/showCart
         */
        $.ajax({
            url:"/product/showCart",
            type:"get",
            dataType:"json",
            success:function (json) {
                let list=json.data;
                for(let i=0;i<list.length;i++){
                    let tr='<tr>'+
                    '<td width="8%"><input class="check-one" name="cid" type="checkbox" value="#{cid}"></td>'+
                        '<td style="width: 90px;"><img src="../../static/image/detail/#{image}.png"></td>'+
                        '<td width="29%">'+
                        '《<span style="font-weight: bold">#{bookname}</span>》<br>'+
                    '<span style="background-color: plum">#{author}</span>&nbsp;'+
                    '<span style="background-color: green">#{type}</span>'+
                    "</td>"+
                    '<td width="11%">'+
                        '￥<span id="danjia-#{cid}">#{price}</span>'+
                        "</td>"+
                        '<td width="15%">'+
                        '<input type="button" style="width: 20px" value="-" onclick="subNum(#{cid})">'+
                        '<input class="count-input" id="goodscnt-#{cid}" type="text" style="margin-left:4px;margin-right:4px;width: 16px;height: 18px;text-align: center" value="#{count}">'+
                        '<input type="button" style="width: 20px" value="+" onclick="addNum(#{cid})">'+
                        "</td>"+
                        '<td width="11%">'+
                        '￥<span class="subtotal" id="totalpeice-#{cid}">#{total}</span>'+
                        '</td>'+
                        "<td><button id=\"btn#{cid}\"  onclick=\"shanchu(#{cid})\" >删除</button></td>"+
                    "</tr>";
                    tr=tr.replace(/#{cid}/g,list[i].cid);
                    tr=tr.replace(/#{image}/g,list[i].bookname);
                    tr=tr.replace(/#{bookname}/g,list[i].bookname);
                    tr=tr.replace(/#{author}/g,list[i].bookauthor);
                    tr=tr.replace(/#{type}/g,list[i].booksort);
                    tr=tr.replace(/#{price}/g,list[i].bookprice);
                    tr=tr.replace(/#{count}/g,list[i].num);
                    tr=tr.replace(/#{total}/g,list[i].num*list[i].bookprice);
                    $("#car-list").append(tr);
                }
            }
        });
    }
    /*添加数量按钮*/
    function addNum(cid) {
        $.ajax({
            url: "/product/num/add/"+cid,
            type: "post",
            dataType: "json",
            success:function (json) {
                if(json.state==200){
                    console.log(json.data);
                    $("#goodscnt-"+cid).val(json.data);
                    let price=$("#danjia-"+cid).html();
                    let totalprice=price*json.data;
                    $("#totalpeice-"+cid).html(totalprice);
                }else {
                    alert("增加失败！");
                }
            }
        });
    }
    /*减少数量按钮*/
    function subNum(cid) {
        $.ajax({
            url: "/product/num/sub/"+cid,
            type: "post",
            dataType: "json",
            success:function (json) {
                if(json.state==200){
                    console.log(json.data);
                    $("#goodscnt-"+cid).val(json.data);
                    let price=$("#danjia-"+cid).html();
                    let totalprice=price*json.data;
                    $("#totalpeice-"+cid).html(totalprice);
                }else {
                    alert("减少失败！");
                }
            }
        });
    }
</script>
<!--获取cids数组并进行拼接-->
<script type="text/javascript">
    document.getElementById("jiesuan").onclick=function () {
        let obj=document.getElementsByName("cid");
        let check_val=[];
        let new_check_val=[];
        for(k in obj){
            if(obj[k].checked){
                check_val.push(obj[k].value);
            }
        }
        console.log(check_val);
        check_val.forEach(item=>{
            if(item){
                new_check_val.push(item);
            }
        })
        console.log(new_check_val);
        let str="?cids="+new_check_val[0];
        let sub="";
        for(let i=1;i<new_check_val.length;i++){
            sub+=","+new_check_val[i];
        }
        str=str+sub;
        console.log(str);
        var url = "{{ url_for('product.confirm') }}";
        location.href=url+str;
    }
</script>
<!--全选按钮-->
<script type="text/javascript">
    let all=document.getElementsByName("cid");
    document.getElementById("checkall").onclick=function () {
        let ok=this.checked;
        for(let i in all){
            all[i].checked=ok;
        }
    }
</script>
<!--单个删除-->
<script type="text/javascript">
    function shanchu(cid) {
        layui.use('layer', function(){
            var layer = layui.layer;
            layer.confirm('确定删除此件商品?',{icon: 3, title:'删除确认'}, function(index){
                $("#btn"+cid).parent().parent().remove();
                $.ajax({
                    url:"/product/delete/"+cid,
                    type: "post",
                    dataType: "json",
                    success:function (json) {
                        console.log(json)
                        if (json.state==200){
                            layer.msg("删除成功!",{
                                icon: 1,
                                time: 1000
                            });
                        }else {
                            layer.msg("删除失败!",{
                                icon: 1,
                                time: 1000
                            });
                        }
                    }
                });
                layer.close(index);
            });
        });
    }
</script>
<!--删除多个商品-->
<script type="text/javascript">
    $("#deletes").click(function () {
        let obj=document.getElementsByName("cid");
        let check_val=[];
        let new_check_val=[];
        for(k in obj){
            if(obj[k].checked){
                check_val.push(obj[k].value);
            }
        }
        console.log(check_val);
        check_val.forEach(item=>{
            if(item){
                new_check_val.push(item);
            }
        })
        console.log(new_check_val);
        let str=new_check_val[0];
        let sub="";
        for(let i=1;i<new_check_val.length;i++){
            sub+=","+new_check_val[i];
        }
        str=str+sub;
        console.log(str);
        layui.use('layer', function(){
            var layer = layui.layer;
            layer.confirm('确定删除所有商品?',{icon: 3, title:'删除确认'}, function(index){
                $.ajax({
                    url:"/product/deletes",
                    type: "post",
                    dataType: "json",
                    contentType: 'application/json',
                    data: JSON.stringify({'cids':str}),
                    success:function (json) {
                        if (json.state==200){
                            layer.msg("删除成功!",{
                                icon: 1,
                                time: 1000
                            },function (){
                                for(let i=0;i<new_check_val.length;i++){
                                    $("#btn"+new_check_val[i]).parent().parent().remove();
                                }
                            });
                        }else {
                            layer.msg("删除失败!",{
                                icon: 1,
                                time: 1000
                            });
                        }
                    }
                });
                layer.close(index);
            });
        });
    });
</script>
<!--点击复选框改变数量和价格-->
<script type="text/javascript">
    window.onload=function(){
        let countInputs=document.getElementsByClassName("count-input");
        let checkOnes=document.getElementsByClassName("check-one");
        let subtotals=document.getElementsByClassName("subtotal");
        let selectedTotal=document.getElementById("selectedTotal");
        let priceTotal=document.getElementById("priceTotal");
        let checkAlls=document.getElementsByClassName("check-all");
        /*totals改变数量和价格*/
        function totals() {
            let count=0;
            let total=0;
            for(let j=0;j<countInputs.length;j++){
                if(checkOnes[j].checked){
                    count=count+parseInt(countInputs[j].value);
                    total=total+Number(subtotals[j].innerHTML);
                }
            }
            selectedTotal.innerHTML=count;
            priceTotal.innerHTML=total;
        }
        /*全选按钮*/
        for(let n=0;n<checkAlls.length;n++){
            checkAlls[n].onchange=function () {
                for(let j=0;j<checkOnes.length;j++){
                    checkOnes[j].checked=this.checked;
                }
                for(let j=0;j<checkAlls.length;j++){
                    checkAlls[j].checked=this.checked;
                }
                totals();
            }
        }
        for(let n=0;n<checkOnes.length;n++){
            checkOnes[n].onchange=function () {
                let sum=0;
                for(let j=0;j<checkOnes.length;j++){
                    if(checkOnes[j].checked){
                        sum++;
                        console.log(sum);
                    }
                }
                for(let j=0;j<checkAlls.length;j++){
                    checkAlls[j].checked=(sum==checkOnes.length);
                }
                totals();
            }
        }
    }
</script>
<script type="text/javascript">
    $("#guanli_a").click(function () {
        $("#liebiao").toggle();
    });
</script>
{% endblock %}